<template>
  <!-- 筛选日榜,周榜,月榜 (日期的筛选)  筛选 + 全部-->
  <div id="time_options">
    <radio_group01 v-model="value01" :radio_values="radio_values" />
    <el_select
      v-model="value02"
      class_name="time_options_select"
      :options="time_options"
      :disabled="true"
    />
    <div class="meng_div">{{ value02 }}</div>
  </div>
</template>

<script>
import radio_group01 from "./radio_group01";
import el_select from "./el_select";
export default {
  name: "time_options",
  components: {
    radio_group01,
    el_select
  },
  data() {
    return {
      value01: "日榜",
      value02: "",
      time_options: []
    };
  },
  computed: {
    value01_value02() {
      return this.value01 + "?" + this.value02;
    }
  },
  model: {
    prop: "value",
    event: "returnBack"
  },
  props: ["value", "radio_values","timing"],
  created: function() {
    this.value01 = this.value.split("?")[0];
    this.$watch("value01", function(newValue, oldValue) {
      this.date_message();
    });
    this.$watch("value01_value02", function(newValue, oldValue) {
      this.changed();
    });
    this.$watch("value", function(newValue, oldValue) {
      this.value01 = this.value.split("?")[0];
    });
    this.date_message();
  },
  methods: {
    //   格式化时间，提交到父组件
    changed() {
      let date;
      let year = new Date().getFullYear();
      switch (this.value01) {
        case "日榜":
          date = this.timestamp(this.value02.split("$")[1], "Y-M-D");
          break;
        case "周榜":
          date =
            this.timestamp(this.value02.split("$")[1].split("-")[0], "Y-M-D") +
            "-" +
            this.timestamp(this.value02.split("$")[1].split("-")[1], "Y-M-D");
          break;
        case "月榜":
          let time = new Date(
            this.timestamp(this.value02.split("$")[1], "Y-M-D")
          );
          let year = time.getFullYear();
          let month = time.getMonth() + 1;
          date =
            year +
            "-" +
            (month < 10 ? "0" + month : month) +
            "-01" +
            "-" +
            this.timestamp(this.value02.split("$")[1], "Y-M-D");
          break;
      }
      this.$emit("returnBack", this.value01 + "?" + date);
    },
    //根据日榜周榜月榜判断当前显示的时间
    date_message() {
      let curTime = Date.now() / 1000;
      let h = new Date().getHours();
      let oneTime = 24 * 60 * 60;
      let year = new Date().getFullYear();
      let month = new Date().getMonth();
      let week_day = new Date().getDay() == 0 ? 7 : new Date().getDay(); //返回星期几的某一天;
      switch (this.value01) {
        case "日榜":
          this.time_options.length = 0;
          let count = 1;
          for (let i = 1; i <= 7; i++) {
            count = i;
            if(this.timing && h < this.timing){  //小店排行0点 - 8点之间没数据，所以展示前天的数据
              count++;
            }
            this.time_options.push(this.timestamp(curTime - oneTime * count, "M月D日") + "　　　　　　　　　　　$" + (curTime - oneTime * count));
          }
          // this.time_options.push(
          //   this.timestamp(curTime - oneTime * 1, "M月D日") +
          //     "　　　　　　　　　　　$" +
          //     (curTime - oneTime * 1),
          //   this.timestamp(curTime - oneTime * 2, "M月D日") +
          //     "　　　　　　　　　　　$" +
          //     (curTime - oneTime * 2),
          //   this.timestamp(curTime - oneTime * 3, "M月D日") +
          //     "　　　　　　　　　　　$" +
          //     (curTime - oneTime * 3),
          //   this.timestamp(curTime - oneTime * 4, "M月D日") +
          //     "　　　　　　　　　　　$" +
          //     (curTime - oneTime * 4),
          //   this.timestamp(curTime - oneTime * 5, "M月D日") +
          //     "　　　　　　　　　　　$" +
          //     (curTime - oneTime * 5),
          //   this.timestamp(curTime - oneTime * 6, "M月D日") +
          //     "　　　　　　　　　　　$" +
          //     (curTime - oneTime * 6),
          //   this.timestamp(curTime - oneTime * 7, "M月D日") +
          //     "　　　　　　　　　　　$" +
          //     (curTime - oneTime * 7)
          // );
          break;
        case "周榜":
          this.time_options.length = 0;
          this.time_options.push(
            this.timestamp(
              curTime - oneTime * (week_day + 7 * 0 + 6),
              "M月D日"
            ) +
              "-" +
              this.timestamp(curTime - oneTime * (week_day + 7 * 0), "M月D日") +
              "　　　　　　　　　　　$" +
              (curTime - oneTime * (week_day + 7 * 0 + 6)) +
              "-" +
              (curTime - oneTime * (week_day + 7 * 0)),

            this.timestamp(
              curTime - oneTime * (week_day + 7 * 1 + 6),
              "M月D日"
            ) +
              "-" +
              this.timestamp(curTime - oneTime * (week_day + 7 * 1), "M月D日") +
              "　　　　　　　　　　　$" +
              (curTime - oneTime * (week_day + 7 * 1 + 6)) +
              "-" +
              (curTime - oneTime * (week_day + 7 * 1)),

            this.timestamp(
              curTime - oneTime * (week_day + 7 * 2 + 6),
              "M月D日"
            ) +
              "-" +
              this.timestamp(curTime - oneTime * (week_day + 7 * 2), "M月D日") +
              "　　　　　　　　　　　$" +
              (curTime - oneTime * (week_day + 7 * 2 + 6)) +
              "-" +
              (curTime - oneTime * (week_day + 7 * 2))
          );
          break;
        case "月榜":
          this.time_options.length = 0;

          switch (month) {
            case 0:
              this.time_options.push(
                this.timestamp(
                  new Date(year - 1, 12, 0).getTime() / 1000,
                  "Y年M月"
                ) +
                  "　　　　　　　　　　　$" +
                  new Date(year - 1, 12, 0).getTime() / 1000,
                this.timestamp(
                  new Date(year - 1, 11, 0).getTime() / 1000,
                  "Y年M月"
                ) +
                  "　　　　　　　　　　　$" +
                  new Date(year - 1, 11, 0).getTime() / 1000,
                this.timestamp(
                  new Date(year - 1, 10, 0).getTime() / 1000,
                  "Y年M月"
                ) +
                  "　　　　　　　　　　　$" +
                  new Date(year - 1, 10, 0).getTime() / 1000
              );
              break;
            case 1:
              this.time_options.push(
                this.timestamp(
                  new Date(year, 1, 0).getTime() / 1000,
                  "Y年M月"
                ) +
                  "　　　　　　　　　　　$" +
                  new Date(year, 1, 0).getTime() / 1000,
                this.timestamp(
                  new Date(year - 1, 12, 0).getTime() / 1000,
                  "Y年M月"
                ) +
                  "　　　　　　　　　　　$" +
                  new Date(year - 1, 12, 0).getTime() / 1000,
                this.timestamp(
                  new Date(year - 1, 11, 0).getTime() / 1000,
                  "Y年M月"
                ) +
                  "　　　　　　　　　　　$" +
                  new Date(year - 1, 11, 0).getTime() / 1000
              );
              break;
            case 2:
              this.time_options.push(
                this.timestamp(
                  new Date(year, 2, 0).getTime() / 1000,
                  "Y年M月"
                ) +
                  "　　　　　　　　　　　$" +
                  new Date(year, 2, 0).getTime() / 1000,
                this.timestamp(
                  new Date(year, 1, 0).getTime() / 1000,
                  "Y年M月"
                ) +
                  "　　　　　　　　　　　$" +
                  new Date(year, 1, 0).getTime() / 1000,
                this.timestamp(
                  new Date(year - 1, 12, 0).getTime() / 1000,
                  "Y年M月"
                ) +
                  "　　　　　　　　　　　$" +
                  new Date(year - 1, 12, 0).getTime() / 1000
              );
              break;
            default:
              this.time_options.push(
                this.timestamp(
                  new Date(year, month - 0, 0).getTime() / 1000,
                  "Y年M月"
                ) +
                  "　　　　　　　　　　　$" +
                  new Date(year, month - 0, 0).getTime() / 1000,
                this.timestamp(
                  new Date(year, month - 1, 0).getTime() / 1000,
                  "Y年M月"
                ) +
                  "　　　　　　　　　　　$" +
                  new Date(year, month - 1, 0).getTime() / 1000,
                this.timestamp(
                  new Date(year, month - 2, 0).getTime() / 1000,
                  "Y年M月"
                ) +
                  "　　　　　　　　　　　$" +
                  new Date(year, month - 2, 0).getTime() / 1000
              );
              break;
          }
          break;
      }
      this.value02 = this.time_options[0];
    }
  }
};
</script>
<style scoped lang="less">
.meng_div {
  position: absolute;
  top: 1px;
  // margin-left: -180px;
  right: 26px;
  white-space: nowrap;
  overflow: hidden;
  width: 155px;
  pointer-events: none;
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  padding-left: 12px;
  background-color: #fff;
  font-size: 14px;
  color: #222;
}
#time_options {
  position: relative;
  > div {
    display: inline-block;
  }
  #el_select {
    display: inline-block;
  }
}
</style>
